@use 'sass:math';
@use '../../../styles/colors';
@use '../../../styles/variables';

$message-time-margin: 0 math.div(variables.$default-gap, 2);
$message-time-font-size: 0.625rem;
$message-time-line-height: 1rem;
$message-time-color: colors.$color-text-grey;

.message-time {
	position: absolute;

	margin: $message-time-margin;

	user-select: none;
	white-space: nowrap;

	color: $message-time-color;

	font-size: $message-time-font-size;
	line-height: $message-time-line-height;
	justify-self: end;

	&-wrapper {
		position: relative;

		& > .message-time {
			bottom: -16px;

			&--normal {
				right: 0;
			}

			&--inverted {
				left: 0;
			}
		}
	}
}
